<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/详情列表.css">
</head>
<body>
    <h2>详情页</h2>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        const id = location.search.split('=')[1]
        function render(id){
            const xhr = new XMLHttpRequest()
            xhr.open('get',` http://zyxcl.xyz/music/api/top/list?id=${id}`)
            xhr.onreadystatechange = ()=>{
                if(xhr.readyState === 4){
                    if(xhr.status === 200){
                        const data = JSON.parse(xhr.responseText)
                        console.log(data)
                        box.innerHTML = `
                                        <div class="header">
                                            <div class="top">
                                                <img width="200"src="${data.playlist.coverImgUrl}" alt="">
                                                <div>
                                                    <h3>${data.playlist.name}</h3>
                                                    <p>网易云音乐</p>
                                                </div>
                                            </div>
                                            <p>${data.playlist.description}</p>
                                            <span>${data.playlist.shareCount}</span>
                                            <span>${data.playlist.playCount}</span>
                                            <span>${data.playlist.subscribedCount}</span>
                                        </div>
                                        <div class="content">
                                            ${data.playlist.tracks.map((item,i)=>{
                                                return `<div>
                                                            <div class="left">
                                                                <span>${i+1}</span>
                                                                <div>
                                                                    <strong>${item.name}</strong>
                                                                    <p>${item.ar[0].name}</p>
                                                                </div>
                                                            </div>
                                                            <span>></span>
                                                        </div>`
                                            }).join('')}
                                        </div>`
                    }
                }
            }
            xhr.send()
        }
        render(id)
    </script>
</body>
</html>